<template>
  <div>
    <n-modal
      v-if="props.showModal"
      v-model:show="props.showModal"
      :mask-closable="true"
      @update:show="$emit('CheckShowModal', false)"
    >
      <n-card
        style="width: 600px"
        title="添加会议"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <template #header-extra>
          <n-button type="error" @click="$emit('CheckShowModal', false)">
            X
          </n-button>
        </template>
        <n-form :model="model">
          <n-form-item path="nLevell" label="会议室门牌号">
            <n-input-group>
              <n-select
                :style="{ width: '100%' }"
                :options="Options"
                placeholder="请选择门牌号"
                @change="handleChangeOId"
              />
            </n-input-group>
          </n-form-item>
          <n-form-item path="URL" label="会议开始时间">
            <n-date-picker
              v-model:formatted-value="sTime"
              v-model:value="startime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              clearable
              placeholder="请选择开始时间"
            />
          </n-form-item>
          <n-form-item path="URL" label="会议结束时间">
            <n-date-picker
              v-model:formatted-value="eTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              clearable
              placeholder="请选择结束时间"
              :is-date-disabled="disablePreviousDate"
            />
          </n-form-item>
          <n-form-item path="URL" label="会议室申请人">
            <n-input v-model:value="uName" placeholder="" disabled />
          </n-form-item>
          <n-form-item path="uName" label="申请部门">
            <n-input-group>
              <n-select
                :style="{ width: '100%' }"
                :options="dIdOptions"
                placeholder="请选择申请部门"
                @change="handleChangeDId"
              />
            </n-input-group>
          </n-form-item>
          <n-row :gutter="[0, 24]">
            <n-col :span="24">
              <div style="display: flex; justify-content: center">
                <n-button round type="primary" @click="UpdateUserFile">
                  添加
                </n-button>
              </div>
            </n-col>
          </n-row>
        </n-form>
      </n-card>
    </n-modal>
    <n-skeleton v-else text :repeat="2" />
    <n-skeleton text style="width: 60%" />
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, reactive } from "vue";
import { addMeeting } from "@/api/meeting";
import { getOffice } from "@/api/office";
import { getDept } from "@/api/dept";
import { useMessage } from "naive-ui";
const message = useMessage();
const emit = defineEmits(["CheckShowModal", "reloadpage"]);
const props = defineProps({
  showModal: {
    type: Boolean,
    default: false,
  },
});
const Options: any = ref([]);
const dIdOptions: any = ref([]);
const uName = window.localStorage.getItem("uName");
const dName: any = ref(window.localStorage.getItem("dName"));
const params = reactive({});
const sTime = ref(null);
const startime: any = ref(null);
const eTime = ref(null);
const model: any = reactive({
  oId: "",
  startTime: "",
  endTime: "",
  uId: window.localStorage.getItem("uId"),
  dId: window.localStorage.getItem("dId"),
  uIdStr: "",
  status: "",
});
getOffice(params).then((res) => {
  res.data.forEach((item: any) => {
    dIdOptions.value.push({
      label: item.dName,
      value: item.dId,
    });
  });
});
getDept().then((res) => {
  res.data.data.forEach((item: any) => {
    Options.value.push({
      label: item.oNum,
      value: item.oNum,
    });
  });
});
const init = () => {
  if (dName.value == "undefined") {
    dName.value = null;
  }
};
init();
const disablePreviousDate = (ts: number) => {
  return ts < startime.value;
};
const handleChangeOId = (value: any) => {
  model.oId = value;
};
const handleChangeDId = (value: any) => {
  model.dId = value;
};
const UpdateUserFile = (e: Event) => {
  e.preventDefault();
  model.startTime = String(sTime.value);
  model.endTime = String(eTime.value);
  model.uId = String(model.uId);
  model.dId = String(model.dId);
  console.log(model);
  addMeeting(model).then((res: any) => {
    if (res.data == 1) {
      message.success("添加成功");
      emit("CheckShowModal", false);
      emit("reloadpage");
    } else {
      message.error("添加失败");
      emit("CheckShowModal", false);
      emit("reloadpage");
    }
  });
};
</script>

<style scoped lang="scss"></style>
